<template>
  <el-card class="box-card">
    <div slot="header">
      <span>应用设置</span>
    </div>
    <el-form ref="ruleForm" v-loading.body="loading" label-width="100px" :model="site" :rules="rules">
      <el-form-item label="名称" prop="title">
        <el-input v-model="site.title" type="text" @keyup.enter.native="submit" />
      </el-form-item>
      <el-form-item label="电话" prop="telephone">
        <el-input v-model="site.telephone" type="text" @keyup.enter.native="submit" />
      </el-form-item>
      <el-form-item label="联系人" prop="linkman">
        <el-input v-model="site.linkman" type="text" @keyup.enter.native="submit" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="site.address" type="text" @keyup.enter.native="submit" />
      </el-form-item>
      <el-form-item label="定位" prop="geo">
        <el-input v-model="site.geo" type="text" @keyup.enter.native="submit" />
      </el-form-item>
      <el-form-item label="微信" prop="wechat">
        <el-input v-model="site.wechat" type="text" @keyup.enter.native="submit" />
      </el-form-item>
      <el-form-item label="QQ" prop="qq">
        <el-input v-model="site.qq" type="text" @keyup.enter.native="submit" />
      </el-form-item>
      <el-form-item label="网址" prop="url">
        <el-input v-model="site.url" type="text" @keyup.enter.native="submit" />
      </el-form-item>
      <el-form-item label="简介" prop="aboutus">
        <el-input v-model="site.aboutus" type="textarea" :autosize="{ minRows: 5, maxRows: 20}" />
      </el-form-item>
      <el-form-item label="绑定二维码">
        <img src="api/site/qrcode">
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit()">修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import * as site from '@/api/site'
export default {
  data() {
    return {
      loading: false,
      site: {
        title: '',
        telephone: '',
        address: '',
        wechat: '',
        geo: '',
        qq: '',
        url: '',
        aboutus: ''
      },
      rules: {
        title: [{
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        }],
        telephone: [{
          required: true,
          message: '请输入电话',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入地址',
          trigger: 'blur'
        }],
        wechat: [{
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        }],
        url: [{
          validator: (rule, value, callback) => {
            if (value) {
              console.log(value)
              // 如果填写了url，那必要满足http://或https://开头
              if (!/^http[s]?:\/\/w+\.+.+[^\.]$/.test(value)) {
                callback(new Error('请输入正确的网址'))
              } else {
                callback()
              }
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }],

        aboutus: [{
          required: true,
          message: '请填写简介',
          trigger: 'blur'
        }]
      }
    }
  },
  created: function() {
    site.detail().then(response => {
      this.site = response.data
    })
  },
  methods: {
    submit: function() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          // 验证通过
          this.update()
        }
      })
    },
    update: function() {
      site.update(this.site).then(response => {
        // 保存token到前端
        console.log(response)
        this.loading = false
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: response.msg
          })
        } else {
          this.$message.error(response.msg)
        }
      })
    }
  }
}
</script>
